<template>
  <view class="page-wrap">
    <child-list-item :labels="labelsMap" :detail="detail" :config="tempColConfig">
      <template v-slot:main>
        <view class="detail-form">
          <view class="form-wrap" :class="{show:showMoreField}">
            <bx-form ref="bxForm" :pageType="'detail'" :BxformType="'detail'" :fields="moreFields">
            </bx-form>
          </view>
        </view>
      </template>
      <template v-slot:footer>
        <view class="show-more" @click="showMore">
          <view class="">
            <text><text class="cuIcon-newshot text-blue margin-right-xs"></text> {{showMoreField?'收起':"更多"}}详情</text>
            <text class="cuIcon-unfold" v-if="!showMoreField"></text>
            <text class="cuIcon-fold " v-else></text>
          </view>
          <view class="">
            <text class="cu-btn  bg-blue  radius shadow-blur  margin-left-xs" @click.stop="toSmda"
              v-if="serviceName==='srvstore_member_mgmt_select'">私密档案</text>
            <text class="cu-btn   radius shadow-blur  bg-blue margin-left-xs"
              v-for="item in buttons" style="min-width: 80px;" v-show="item.button_type==='edit'" @click.stop="clickBtn(item)"><text class="cuIcon-edit margin-right-xs"></text>{{item.button_name}}</text>
          </view>
        </view>
      </template>
    </child-list-item>

    <view class="statis-box" v-if="statisConfig&&statisConfig.labels&&detail" @click="toDashboard">
      <view class="statis-item" v-for="item in statisConfig.labels">
        <view class="item-label" v-if="statisConfig.labelPosition==='top'">
          {{item.label||''}}
        </view>
        <view class="item-value">
          {{detail[item.col]||''}}
        </view>
        <view class="item-label" v-if="statisConfig.labelPosition!=='top'">
          {{item.label||''}}
        </view>
      </view>
    </view>

    <view class="child-list-box">
      <view class="child-list-item" v-for="(item,index) in childService" :key="index">
        <view class="handler-bar" @click="changeChildTab(index)" v-if="childIndex!==index&&childService.length>1">
          <view class="title">
            {{item.label||''}}
          </view>
          <view class="handler">
            <button class="cu-btn bg-white round"><text class="cuIcon-unfold"></text></button>
          </view>
        </view>
        <view class="child-list-content">
          <child-list :mainData="detail" :disabled="disabled" :childService="item" v-if="item&&detail"
            v-show="childIndex==index" :appName="appName" @changeTab="changeChildTab(index)">
          </child-list>
        </view>
      </view>
    </view>

    <!--    <view class="child-service-tabs">
      <view class="tab-list">
        <view class="tab-item" :class="{'button':tab.type==='button','active':index===curTabIndex}"
          v-for="(tab,index) in tabList" :key="tab.label" @click="changeTab(index)">
          <text :class="{'cu-btn sm line-gray border round':tab.type==='button'}">{{tab.label}}</text>
        </view>
      </view>
    </view>

    <view class="child-list-wrap">
      <child-list :mainData="detail" :childService="curChildService" v-if="curChildService&&detail" :appName="appName">
      </child-list>
    </view> -->
    <view class="chart-detail" v-if="serviceName==='srvstore_member_mgmt_select'">
      <view class="detail-title">
        投资损益
      </view>
      <view class="chart-box" v-if="tzsyOption&&tzsyOption.option&&tzsyOption.option.series">
        <uni-echart class="uni-ec-charts" canvasId="uni-ec-charts1" id="uni-ec-charts1" :ec="tzsyOption">
        </uni-echart>
      </view>
      <view class="chart-box hint" v-else>
        暂无数据
      </view>
    </view>
    <view class="chart-detail" v-if="serviceName==='srvstore_member_mgmt_select'">
      <view class="detail-title">
        调理效果
      </view>
      <view class="chart-box" v-if="tlxgOption&&tlxgOption.option&&tlxgOption.option.series">
        <uni-echart class="uni-ec-charts" canvasId="uni-ec-charts2" id="uni-ec-charts2" :ec="tlxgOption">
        </uni-echart>
      </view>
      <view class="chart-box hint" v-else>
        暂无数据
      </view>
    </view>


    <view class="cu-modal bottom-modal" :class="{show:showChildSelector}" @click="showChildSelector=false">
      <view class="cu-dialog" @click.stop="">
        <view class="child-list" v-if="childList&&childList.length>0">
          <view class="child-list-item"
            :class="{'active line-blue border':curChildService&&curChildService.constraint_name&&curChildService.constraint_name===item.constraint_name}"
            v-for="item in childList" @click="selectChild(item)">
            {{item.foreign_key&&item.foreign_key.section_name?item.foreign_key.section_name:item.service_view_name}}
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="child-service-box">
      <view class="child-service-item" v-for="item in childService" @click="toChildServiceList(item)">
        <view class="icon bg-blue shadow-blur" v-if="item.label">
          <view class="text" v-for="text in item.iconArray">
            {{text}}
          </view>
        </view>
        <view class="icon bg-blue shadow-blur" v-else>
          <text class="cuIcon-shop"></text>
        </view>
        <view class="label">
          {{item.label||''}}
        </view>
      </view>
      <view class="child-service-item" @click="toDetail()">
        <view class="icon bg-blue light shadow-blur">
          <view class="text">
            查
          </view>
          <view class="text">
            看
          </view>
          <view class="text">
            详
          </view>
          <view class="text">
            情
          </view>
        </view>
        <view class="label">
          查看详情
        </view>
      </view>
    </view> -->

    <!-- 		<view class="button-box">
			<button class="bg-blue cu-btn" @click="toDetail">查看详情</button>
		</view> -->

  </view>
</template>

<script>
  import uniEchart from '@/components/uni-ec-canvas/uni-echart.vue'
  import dayjs from '../../../common/dayjs.min.js'
  let option = {
    title: {
      // text: '折线图堆叠'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['慢病支出预防效益', '同业平均支出节约', '重症风险预防效益', '精神劳务损失节约']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: ['损益价值']
    },
    yAxis: {
      type: 'value'
    },
    color: [
      "#0088FE",
      "#F35959",
      "#00B043",
      "#FF9201"
    ],
    series: [{
        name: '慢病支出预防效益',
        type: 'bar',
        // stack: '总量',
        barMaxWidth: "25",
        barGap: "130%",
        data: []
      },
      {
        name: '同业平均支出节约',
        type: 'bar',
        // stack: '总量',
        barMaxWidth: "25",
        barGap: "130%",
        data: []
      },
      {
        name: '重症风险预防效益',
        type: 'bar',
        // stack: '总量',
        barMaxWidth: "25",
        barGap: "130%",
        data: []
      },
      {
        name: '精神劳务损失节约',
        type: 'bar',
        // stack: '总量',
        barMaxWidth: "25",
        barGap: "130%",
        data: []
      }
    ]
  }

  let option2 = {
    title: {
      // text: '折线图堆叠'
    },

    tooltip: {
      show: true,
      trigger: 'axis',
      axisPointer: {
        label: {
          show: true,
          backgroundColor: '#fff',
          color: '#556677',
          borderColor: 'rgba(0,0,0,0)',
          shadowColor: 'rgba(0,0,0,0)',
          shadowOffsetY: 0
        },
        lineStyle: {
          width: 0
        }
      },
      backgroundColor: '#fff',
      textStyle: {
        color: '#5c6c7c'
      },
      padding: [10, 10],
      extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
    },
    legend: {
      data: ['偏颇值', '症状数', '风险度', '能量值']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
    },
    yAxis: {
      type: 'value'
    },
    color: [
      "#fbce6b",
      "#9ad081",
      "#607aca",
      "#ff007f"
    ],
    series: [{
        name: '偏颇值',
        type: 'line',
        // stack: '总量',
        barMaxWidth: "25",
        barGap: "130%",
        data: []
      },
      {
        name: '症状数',
        type: 'line',
        // stack: '总量',
        barMaxWidth: "25",
        barGap: "130%",
        data: []
      },
      {
        name: '风险度',
        type: 'line',
        // stack: '总量',
        barMaxWidth: "25",
        barGap: "130%",
        data: []
      },
      {
        name: '能量值',
        type: 'line',
        // stack: '总量',
        barMaxWidth: "25",
        barGap: "130%",
        data: []
      }
    ]
  }


  export default {
    components: {
      uniEchart
    },
    data() {
      return {
        displayColumn: "",
        serviceName: "",
        id: "",
        appName: "",
        colsV2Data: {},
        detail: null,
        showMoreField: false,
        curTabIndex: -1,
        curChildService: null,
        showChildSelector: false,
        childList: [],
        childIndex: 0,
        disabled: false,
        tzsyOption: {
          option: {}
        },
        tlxgOption: {
          option: {}
        },
        series: []
      }

    },
    computed: {
      labelsMap() {
        if (Array.isArray(this.colsV2Data?.srv_cols)) {
          return this.colsV2Data.srv_cols.reduce((res, cur) => {
            res[cur.columns] = cur.label
            return res
          }, {})
        }
        return {}
      },
      statisConfig() {
        // 统计字段配置
        let config = this.moreConfig?.statis
        if (config) {
          const column = config?.column
          const label = config?.label
          if (Array.isArray(label) && label.length > 0 && Array.isArray(column) && column.length > 0 && column
            .length === label.length) {
            let arr = config.label.map((item, index) => {
              const obj = {
                label: item,
                col: column[index]
              }
              return obj
            })
            return {
              labels: arr,
              link: config.link,
              labelPosition: config.labelPosition
            }
          }
        }
      },
      moreFields() {
        if (Array.isArray(this.colsV2Data?._fieldInfo) && this.colsV2Data?._fieldInfo.length > 0) {
          if (this.tempColConfig) {
            let field = []
            if (this.tempColConfig?.title?.colName) {
              field.push(this.tempColConfig.title.colName)
            }
            if (this.tempColConfig?.img) {
              field.push(this.tempColConfig.img)
            }
            if (Array.isArray(this?.tempColConfig?.cols) && this.tempColConfig.cols.length > 0) {
              this.tempColConfig.cols.forEach(item => {
                if (item.colName) {
                  field.push(item.colName)
                }
              })
            }
            if (field.length > 0) {
              return this.colsV2Data._fieldInfo.filter(item => !field.includes(item.column))
            } else {
              return this.colsV2Data?._fieldInfo
            }
          }
        }
      },
      tempColConfig() {
        return this.moreConfig?.tempColConfig
      },
      moreConfig() {
        let result = null
        if (this.colsV2Data?.more_config && typeof this.colsV2Data.more_config === 'string') {
          try {
            result = JSON.parse(this.colsV2Data.more_config)
          } catch (e) {}
        }
        return result
      },
      topColumn() {
        if (Array.isArray(this.colsV2Data?._fieldInfo)) {
          let columns = this.colsV2Data._fieldInfo
          let cur = columns.filter(item => item.seq > 200 && item.seq < 400)
          if (this.displayColumn) {
            let cur2 = columns.filter(item => item.column === this.displayColumn)
            if (cur2.length > 0) {
              cur = cur2
            }
          }
          if (cur.length > 0) {
            return cur[0]
          }
        }
      },
      tabList() {
        if (Array.isArray(this.childService)) {
          if (this.childService.length && this.childService.length < 4) {
            return this.childService
          } else if (this.childService.length >= 4) {
            let list1 = this.childService.slice(0, 3)
            let list2 = this.childService.slice(3)
            let index3 = {
              label: '更多',
              type: 'button',
              list: list2
            }
            return [...list1, index3]
          }
        }
      },
      childService() {
        if (this.colsV2Data && Array.isArray(this.colsV2Data.child_service)) {
          return this.colsV2Data.child_service.map(item => {
            if (item?.foreign_key?.more_config) {
              try {
                item.foreign_key.moreConfig = JSON.parse(item?.foreign_key?.more_config)
              } catch (e) {
                //TODO handle the exception
              }
            }
            if (item?.foreign_key?.section_name) {
              item.label = item.foreign_key.section_name
            } else {
              item.label = item.service_view_name
            }
            if (item?.foreign_key?.constraint_name) {
              item.constraint_name = item.foreign_key.constraint_name
            }
            if (item.label) {
              item.iconArray = item.label.slice(0, 4).split('')
            }
            return item
          }).filter((item, index) => {
            if (item.foreign_key?.moreConfig?.show_in_mobile === false) {
              return false
            }
            if (Array.isArray(this.detail?._child_tables) && this.detail._child_tables.length > 0) {
              const arr = this.detail._child_tables
              if (arr[index] === 0) {
                return false
              } else {
                return true
              }
            } else {
              return true
            }
          }).filter(item => this.showChildList(item))
        } else {
          return []
        }
      },
      buttons: function() {
        let buttons = [];
        if (this.colsV2Data && this.colsV2Data._buttonInfo) {
          buttons = this.colsV2Data._buttonInfo;
        } else if (this.colsV2Data && this.colsV2Data._formButtons) {
          buttons = this.colsV2Data._formButtons;
        }
        buttons = buttons.filter(item => item.button_name !== '重置');
        let data = {};
        if(Array.isArray(this.fields)&&this.fields.length>0){
          this.fields.forEach(item => {
            data[item['column']] = item['value'];
          });
        }
        let fieldModel = data;
        buttons.forEach(btn => {
          if (btn.disp_exps) {
            // #ifdef H5
            btn['display'] = eval(btn.disp_exps);
            // #endif
          }
          if (btn.operate_params) {
            let fieldData = btn.operate_params['data'];
            if (fieldData && Array.isArray(fieldData) && fieldData.length > 0) {
              fieldData = fieldData[0];
              let newData = {};
              Object.keys(fieldData).forEach(data_item => {
                let item = fieldData[data_item];
                if (item.value_type && item.value_type === 'rowData') {
                  newData[data_item] = fieldModel[item.value_key];
                }
              });
              btn['requestData'] = newData;
              btn['requestCondition'] = this.condition;
            }
          }
        });
        return buttons;
      }
    },
    watch: {
      tabList: {
        handler(newVal) {
          if (newVal && newVal.length > 0 && !this.curChildService) {
            this.curTabIndex = 0
            this.curChildService = this.childService[0]
          }
        },
      }

    },
    methods: {
      clickBtn(btn){
        if(btn?.button_type==='edit'&&btn?.service_name){
          let params = {
            "type": "update",
            "condition": [{
              "colName": "id",
              "ruleType": "in",
              "value":this.detail?.id
            }],
            "serviceName": btn.service_name,
          }
          uni.navigateTo({
            url: "/pages/public/formPage/formPage?params=" + JSON.stringify(params)
          })
        }
      },
      toSmda() {
        if (this.detail?.hy_no) {
          let url = `/pages/specific/khxx/khxx?hy_no=${this.detail?.hy_no}&hideNormal=true`
          uni.navigateTo({
            url
          })
        }
      },
      changeChildTab(index) {
        if (index === this.childIndex && this.childService.length > 1) {
          this.childIndex = null
        } else {
          this.childIndex = index
        }
      },
      selectChild(e) {
        this.curTabIndex = 3
        this.curChildService = e
        this.showChildSelector = false
      },
      changeTab(index) {
        let data = this.tabList[index]
        if (index >= 3 && Array.isArray(data.list) && data.list.length > 0) {
          // 点击更多
          this.showChildSelector = true;
          this.childList = data.list
        } else {
          this.childList = []
          this.curTabIndex = index
          this.curChildService = this.childService[index]
          // this.getChildList(data)
        }
      },
      async getChildList(e) {
        let config = this.deepClone(e)
        let app = this.appName || uni.getStorageSync('activeApp');
        let url = this.getServiceUrl(app, e.service_name, 'select');
        let req = {
          "serviceName": e.service_name,
          "colNames": ["*"],
          "condition": [{
            "colName": e.foreign_key?.column_name,
            "ruleType": "eq",
            "value": this.detail[e.foreign_key?.referenced_column_name]
          }],
          "page": {
            "pageNo": 1,
            "rownumber": 5
          },
          "query_source": "list_page"
        }
        let res = await this.$http.post(url, req)
        if (res.data.state === 'SUCCESS') {
          this.childData = res.data.data
        }
      },
      showMore() {
        this.showMoreField = !this.showMoreField
      },
      toDashboard() {
        const dashboard_no = this.statisConfig?.link?.dashboard_no
        uni.navigateTo({
          url: `/pages/specific/dashboard/dashboard?dashboard_no=${dashboard_no}`
        })
      },
      showChildList: function(childList, mainFromData) {
        let self = this
        const fk = childList.foreign_key;
        let expr = fk.show_ui_child_table;
        let showExpr = fk.show_child_list_expr
        let data = self.detail || mainFromData
        if (fk && expr) {
          if (typeof expr === 'string') {
            if (expr === "否") {
              return false
            } else if (expr === "是") {
              if (showExpr !== null && showExpr.startsWith("{{") && showExpr.endsWith("}}")) {
                showExpr = showExpr.replace("{{", "").replace("}}", "");
                let mainData = self.detail || mainFromData
                try {
                  // #ifdef APP-PLUS
                  return eval(showExpr);
                  // #endif
                  return true
                } catch (e) {}
              } else if (showExpr) {
                try {
                  console.log("showChildList", eval(showExpr), showExpr)
                  return eval(showExpr);
                } catch (e) {}

              } else {
                return true;
              }
            }
          }
        }
      },
      toDetail(e) {
        if (this.id && this.serviceName) {
          let params = {
            "type": "detail",
            "condition": [{
              "colName": "id",
              "ruleType": "eq",
              "value": this.id
            }],
            "serviceName": this.serviceName,
          }
          let arr = this.colsV2Data._fieldInfo
          if (Array.isArray(arr) && arr.length > 0) {

            let defaultVal = arr.reduce((res, cur) => {
              if (cur.value && cur.column) {
                res[cur.column] = cur.value
              }
              return res
            }, {})

            if (Object.keys(defaultVal).length > 0) {
              // params.defaultVal = defaultVal
            }

          }
          uni.navigateTo({
            url: "/pages/public/formPage/formPage?params=" + JSON.stringify(params)
          })
        }
      },
      toChildServiceList(e) {
        let data = this.deepClone(e);
        let formData = this.detail;
        let condition = [{
          colName: e.foreign_key.column_name,
          ruleType: 'eq',
          value: formData[e.foreign_key.referenced_column_name]
        }];
        if (e.foreign_key && e.foreign_key.more_config && typeof e.foreign_key.more_config === 'string') {
          try {
            e.foreign_key.more_config = JSON.parse(e.foreign_key.more_config);
          } catch (e) {
            //TODO handle the exception
          }
        }
        if (e.foreign_key && e.foreign_key.more_config && formData[e.foreign_key.referenced_column_name]) {
          let moreConfig = e.foreign_key.more_config;
          if (e.foreign_key.more_config.targetType) {
            let targetType = e.foreign_key.more_config.targetType;
            if (targetType === 'list') {
              uni.navigateTo({
                url: '/pages/public/list/list?pageType=list&serviceName=' + e.service_name +
                  '&cond=' + JSON.stringify(condition)
              });
            } else if (targetType === 'detail') {
              if (e.childData && e.childData.data && e.childData.data.length > 0) {
                let params = {
                  type: 'update',
                  formDisabled: true,
                  condition: [{
                    colName: 'id',
                    ruleType: 'in',
                    value: e.childData.data[0].id
                  }],
                  serviceName: e.service_name
                  // "defaultVal": row
                };
                uni.navigateTo({
                  url: '/pages/public/formPage/formPage?params=' + JSON.stringify(params)
                });
              } else {
                uni.showModal({
                  title: '提示',
                  content: '暂无数据，是否添加数据',
                  success(res) {
                    if (res.confirm) {
                      let params = {
                        type: 'add',
                        serviceName: e.service_name.replace('_select', '_add')
                      };
                      console.log(e);
                      if (e.foreign_key && e.foreign_key.referenced_column_name && e
                        .foreign_key.column_name) {
                        params.defaultCondition = [{
                          colName: e.foreign_key.referenced_column_name,
                          ruleType: 'eq',
                          value: formData[e.foreign_key.column_name]
                        }];
                      }
                      uni.navigateTo({
                        url: '/pages/public/formPage/formPage?params=' + JSON
                          .stringify(params)
                      });
                    }
                  }
                });
              }
            }
          }
          if (moreConfig.app_list_column && typeof moreConfig.app_list_column == 'object' && moreConfig
            .app_list_column.title) {
            uni.navigateTo({
              url: '/pages/public/list/list?pageType=list&serviceName=' +
                e.service_name +
                '&cond=' +
                JSON.stringify(condition) +
                '&viewTemp=' +
                JSON.stringify(moreConfig.app_list_column)
            });
          }
        } else if (data?.srv_app && data?.service_name && data?.foreign_key) {
          const foreign_key = data.foreign_key
          condition = [{
            colName: foreign_key.ref_service_column,
            ruleType: "eq",
            value: formData[foreign_key.refed_service_column]
          }];
          uni.navigateTo({
            url: `/pages/public/list/list?destApp=${data.srv_app}&pageType=list&serviceName=${data.service_name}&foreign_key=${JSON.stringify(data.foreign_key)}` +
              '&cond=' + JSON
              .stringify(condition)
          });
        } else {
          uni.navigateTo({
            url: '/pages/public/list/list?pageType=list&serviceName=' + e.service_name + '&cond=' +
              JSON.stringify(condition) + '&showNavBack=' + true
          });
        }
      },
      async getDefaultVal() {
        if (!this.id) {
          return
        }
        let app = this.appName || uni.getStorageSync('activeApp');
        let url = this.getServiceUrl(app, this.serviceName, 'select');
        let req = {
          serviceName: this.serviceName,
          colNames: ['*'],
          condition: [{
            colName: "id",
            ruleType: 'eq',
            value: this.id
          }],
          page: {
            pageNo: 1,
            rownumber: 1
          }
        };
        if (this.colsV2Data?.vpage_no) {
          req['vpage_no'] = this.colsV2Data.vpage_no
        }
        let res = await this.$http.post(url, req);
        if (res.data.state === 'SUCCESS') {
          if (Array.isArray(res.data.data) && res.data.data.length > 0) {
            this.detail = res.data.data[0]
            if (this.serviceName === 'srvstore_member_mgmt_select' && this.detail?.hy_no) {
              this.getTzsy(this.detail?.hy_no)
              this.getTlxg(this.detail?.hy_no)
            }
            return this.detail
          }
        }
      },
      async getFieldsV2() {
        let self = this
        let app = uni.getStorageSync('activeApp');
        let colVs = await this.getServiceV2(this.serviceName, 'detail', 'detail', app);
        if (!colVs) {
          return
        }
        if (colVs.more_config) {
          try {
            let moreConfig = JSON.parse(colVs.more_config)
            if (moreConfig && moreConfig.displayColumn) {
              this.displayColumn = moreConfig.displayColumn
            }
          } catch (e) {
            //TODO handle the exception
          }
        }
        if (colVs.service_view_name) {
          uni.setNavigationBarTitle({
            title: colVs.service_view_name
          });
        }
        let defaultVal = await this.getDefaultVal();
        colVs._fieldInfo = this.setFieldsDefaultVal(colVs._fieldInfo, defaultVal || {});
        this.fields = colVs._fieldInfo
        this.colsV2Data = colVs;
      },
      getTlxg(hy_no) {
        // 调理效果
        let req = {
          "serviceName": "srvfyzh_health_tonning_record_select",
          "colNames": ["*"],
          "condition": [{
            colName: 'hy_no',
            ruleType: 'eq',
            value: hy_no
          }],
          order: [{
            colName: "create_time",
            orderType: "desc"
          }],
          "page": {
            "pageNo": 1,
            "rownumber": 7
          },
        }

        let url = this.getServiceUrl('fyzhmd', 'srvfyzh_health_tonning_record_select', 'select');
        this.$http.post(url, req).then(res => {
          if (res.data.state === 'SUCCESS' && Array.isArray(res.data.data)) {
            let data = res.data.data.reverse();
            // this.listData = data

            if (data.length > 0) {
              let series = {
                偏颇值: [],
                症状数: [],
                风险度: [],
                能量值: []
              }
              let cate = []
              data.forEach(item => {
                cate.push(dayjs(item.create_time).format("MM-DD"))
                series['偏颇值'].push(item.bias_values || 0)
                series['症状数'].push(item.symptoms_number || 0)
                series['风险度'].push(item.risk_degree || 0)
                if (item.energy_value) {
                  series['能量值'].push(Number(item.energy_value))
                }
              })
              let options = this.deepClone(option2)
              options.series[0].data = series['偏颇值']
              options.series[1].data = series['症状数']
              options.series[2].data = series['风险度']
              options.series[3].data = series['能量值']
              options.xAxis.data = cate
              this.tlxgOption.option = options
            } else {
              this.tlxgOption.option = {}
            }
          }
        })

      },
      getTzsy(hy_no) {
        // 投资损益
        let req = {
          "serviceName": "srvfyzh_health_programme_select",
          "colNames": ["*"],
          "condition": [{
            colName: 'hy_no',
            ruleType: 'eq',
            value: hy_no
          }],
          group: [{
            colName: 'money_topay',
            type: 'sum'
          }],
          "page": {
            "pageNo": 1,
            "rownumber": 1
          },
        }
        let url = this.getServiceUrl('fyzhmd', 'srvfyzh_health_programme_select', 'select');
        this.$http.post(url, req).then(res => {
          if (res.data.state === 'SUCCESS' && Array.isArray(res.data.data)) {
            if (res.data.data.length > 0) {
              let data = res.data.data[0].money_topay
              if (data && !isNaN(data) && typeof data === 'number') {
                // this.total = data
                let series = {
                  慢病支出预防效益: [],
                  同业平均支出节约: [],
                  重症风险预防效益: [],
                  精神劳务损失节约: [],
                }
                series['慢病支出预防效益'].push(data * 0.5)
                series['同业平均支出节约'].push(data * 0.3)
                series['重症风险预防效益'].push(data)
                series['精神劳务损失节约'].push(data * 0.1)
                let options = this.deepClone(option)
                options.series[0].data = series['慢病支出预防效益']
                options.series[1].data = series['同业平均支出节约']
                options.series[2].data = series['重症风险预防效益']
                options.series[3].data = series['精神劳务损失节约']
                this.tzsyOption.option = options
              }
            }
          }
        })

      },
    },
    onLoad(option) {
      if (option.disabled) {
        this.disabled = true
      }
      const {
        destApp,
        serviceName,
        id
      } = option;
      if (destApp) {
        this.appName = destApp
        uni.setStorageSync('activeApp', destApp);
      }
      if (serviceName && id) {
        this.serviceName = serviceName

        this.id = id
        this.getFieldsV2()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page-wrap {
    background-color: #F8F8FA;
    min-height: calc(100vh - var(--window-top));
    overflow: auto;
    padding: 20rpx;
  }

  .page-title {
    margin: 20rpx 20rpx 10rpx;
    border-radius: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36rpx;
    color: #000;
    font-weight: bold;
  }

  .detail-form {
    .form-wrap {
      height: 0;
      overflow: hidden;

      ::v-deep .bx-form-wrap {
        padding: 0;
      }

      &.show {
        height: auto;
      }
    }
  }

  .show-more {
    border-top: 1rpx solid #F2F1F6;
    margin-top: 20rpx;
    padding: 20rpx 0;
    text-align: center;
    font-size: 14px;
    font-family: 苹方-简;
    font-weight: normal;
    color: #ADAEBB;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .statis-box {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    margin: 20rpx;
    border-radius: 20rpx;

    .statis-item {
      padding: 30rpx 20rpx;
      flex: 1;
      min-width: 25%;
      text-align: center;

      .item-label {
        color: #999;
        margin-top: 10rpx;
      }

      .item-value {
        font-weight: bold;
        font-size: 36rpx;
      }
    }
  }

  .button-box {
    width: 100%;
    height: 200rpx;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background-color: #fff;
    padding-top: 50rpx;

    .cu-btn {
      width: 50%;
    }
  }

  .child-list {
    padding: 20rpx;
    margin: 20rpx;
    display: flex;
    flex-wrap: wrap;

    .child-list-item {
      width: calc(50% - 10rpx);
      margin-right: 20rpx;
      background-color: #Fff;
      border-radius: 10rpx;
      padding: 10rpx;
      margin-bottom: 10rpx;
      text-align: center;

      &:nth-child(2n) {
        margin-right: 0;
      }
    }
  }

  .child-list-wrap {
    background-color: #fff;
    overflow: hidden;
    border-radius: 0 0 20rpx 20rox;
  }

  .child-service-tabs {
    margin-top: 20rpx;

    .tab-list {
      background-color: #fff;
      border-radius: 20rpx 20rpx 0 0;
      display: flex;
      // padding:  20rpx 0;
      align-items: center;
      border-bottom: 1px solid #F2F1F6;

      .tab-item {
        flex: 1;
        padding: 30rpx 10rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: center;
        color: #ADAEBB;

        &.active {
          position: relative;
          color: #333;

          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: calc(50% - 15rpx);
            border: 15rpx solid transparent;
            border-bottom-color: #333;
          }
        }

        &.button {
          flex: 0.5;
          // padding: 0 10rpx;

          .line-gray {
            color: #ADAEBB;
            border: 1px solid #F2F1F6;
          }
        }
      }
    }
  }

  .child-service-box {
    background-color: #FFF;
    // min-height: calc(100vh - var(--window-top) - 300rpx);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 10rpx 20rpx 0;
    border-radius: 20rpx;

    .child-service-item {
      width: calc(100%/3);
      padding: 20rpx;
      text-align: center;
      overflow: hidden;
      display: inline-block;

      .icon {
        margin: auto;
        padding: 15rpx;
        width: 120rpx;
        height: 120rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        border-radius: 20rpx;
        margin-bottom: 10rpx;
        // background: #1488CC;

        /* fallback for old browsers */
        .image {
          width: 100%;
          height: 100%;
        }

        .text {
          // font-weight: bold;
          font-size: 32rpx;
          width: 50%;
        }

      }
    }

  }

  .child-list-box {
    margin: 20rpx 0;
    border-radius: 20rpx;

    .child-list-item {
      padding: 20rpx 0;
      background-color: #fff;
      margin-bottom: 20rpx;

      .handler-bar {
        display: flex;
        padding: 0 20rpx;
        width: 100%;

        .title {
          flex: 1;
          font-weight: 600;
        }

        .handler {
          display: flex;
          flex-wrap: wrap;
          max-width: 50%;

          .cu-btn {
            margin-left: 10rpx;
          }
        }

      }

      .child-list-title {
        padding: 0 20rpx;
        font-weight: 600;
      }
    }
  }

  .chart-detail {
    background-color: #fff;
    padding: 20rpx;
    margin: 20rpx 0;
    border-radius: 20rpx;

    .detail-title {
      // background: #F5F8FF;
      border-radius: 22px;
      // font-size: 16px;
      font-family: 苹方-简;
      font-weight: normal;
      // color: #0088FE;
      border-radius: 40rpx;
      // text-align: center;
      // padding: 20rpx;
      margin-bottom: 20rpx;
      font-weight: 600;
    }

    .chart-box {
      height: 500rpx;
      text-align: center;

      &.hint {
        height: 100rpx;
        line-height: 100rpx;
        color: #999;
      }
    }

  }
</style>
